<template>
  <div class="user-detail-container">
    <div class="user-info-box" id="userInfoBox">
      <!-- 标题 -->
      <h2 class="title">{{ $t('msg.user.detail') }}</h2>
      <!-- 头部 -->
      <div class="header" style="display: block">
        <el-button v-if="!edit" type="text" class="edit" @click="onEditClick">
          {{ $t('msg.btn.edit') }}
        </el-button>
        <el-button v-else type="text" class="edit" @click="onShowClick">
          {{ $t('msg.btn.show') }}
        </el-button>
      </div>
      <div class="content">
        <el-form :model="userFrom" label-width="auto" style="width: 100%">
          <el-form-item :label="$t('msg.user.userName')">
            <el-input
              v-if="edit"
              v-model="userFrom.userName"
              readonly
              :placeholder="$t('msg.user.userNameTips')"
            />
            <el-label v-else>{{ userFrom.userName }}</el-label>
          </el-form-item>
          <el-form-item :label="$t('msg.user.name')">
            <el-input
              v-if="edit"
              v-model="userFrom.name"
              :placeholder="$t('msg.user.nameTips')"
            /><el-label v-else>{{ userFrom.name }}</el-label>
          </el-form-item>
          <el-form-item :label="$t('msg.user.sex')">
            <el-radio-group v-model="userFrom.sex" :disabled="!edit">
              <el-radio :label="1">{{ $t('msg.user.sexMale') }}</el-radio>
              <el-radio :label="2">{{ $t('msg.user.sexFemale') }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item :label="$t('msg.user.phone')">
            <el-input
              v-if="edit"
              v-model="userFrom.phone"
              :placeholder="$t('msg.user.phoneTips')"
            />
            <el-label v-else>{{ userFrom.phone }}</el-label>
          </el-form-item>
          <el-form-item :label="$t('msg.user.birthday')">
            <el-date-picker
              v-if="edit"
              v-model="userFrom.birthday"
              type="date"
              :placeholder="$t('msg.user.birthdayTips')"
              style="width: 100%"
            />
            <el-label v-else>{{
              $filters.dateFilter(userFrom.birthday)
            }}</el-label>
          </el-form-item>
          <el-form-item :label="$t('msg.user.email')">
            <el-input
              v-if="edit"
              v-model="userFrom.email"
              :placeholder="$t('msg.user.emailTips')"
            />
            <el-label v-else>{{ userFrom.email }}</el-label>
          </el-form-item>
          <el-form-item :label="$t('msg.user.wechat')">
            <el-input
              v-if="edit"
              v-model="userFrom.wechat"
              :placeholder="$t('msg.user.wechatTips')"
            />
            <el-label v-else>{{ userFrom.wechat }}</el-label>
          </el-form-item>
          <el-form-item :label="$t('msg.user.nation')">
            <el-input
              v-if="edit"
              v-model="userFrom.nation"
              :placeholder="$t('msg.user.nationTips')"
            />
            <el-label v-else>{{ userFrom.nation }}</el-label>
          </el-form-item>

          <el-form-item :label="$t('msg.user.married')">
            <el-switch v-model="userFrom.married" :disabled="!edit" />
          </el-form-item>
          <el-form-item :label="$t('msg.user.role')">
            <el-checkbox-group v-model="userFrom.role" v-if="edit">
              <el-checkbox
                v-for="(item, index) in allRoleList"
                :key="index"
                :label="item.id"
                name="type"
              >
                {{ item.title }}
              </el-checkbox>
            </el-checkbox-group>
            <el-label v-else>{{ userFrom.roleTitles }}</el-label>
          </el-form-item>

          <el-form-item :label="$t('msg.user.idCard')">
            <el-input
              v-if="edit"
              v-model="userFrom.idCard"
              :placeholder="$t('msg.user.idCardTips')"
            />
            <el-label v-else>{{ userFrom.idCard }}</el-label>
          </el-form-item>
          <el-form-item :label="$t('msg.user.remark')">
            <el-input v-if="edit" v-model="userFrom.remark" type="textarea" />
            <el-label v-else>{{ userFrom.remark }}</el-label>
          </el-form-item>
          <el-form-item class="btns" v-show="edit">
            <el-button
              type="primary"
              :loading="loading"
              @click="handlerCreate"
              >{{ $t('msg.btn.submit') }}</el-button
            >
            <el-button>{{ $t('msg.btn.cancel') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 内容 -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { userDetail, editorUser } from '@/api/user-manage'
import { useRoute, useRouter } from 'vue-router'
import { roleList } from '@/api/role'
import { ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
const router = useRouter()
const route = useRoute()
const userId = route.params.id
const userFrom = ref({})
const loading = ref(false)
const edit = ref(false)
const getUserDetail = async () => {
  userFrom.value = await userDetail(userId)
  if (userFrom.value.married === 1) {
    userFrom.value.married = true
  } else {
    userFrom.value.married = false
  }
  userFrom.value.roleTitles = JSON.parse(userFrom.value.role)
    .map((item) => item.title)
    .join(',')
  userFrom.value.role = JSON.parse(userFrom.value.role).map((item) => item.id)
}
const allRoleList = ref([])
const getRoleList = async () => {
  const result = await roleList({
    page: 1,
    size: 100
  })
  allRoleList.value = result.items
}
getRoleList()

getUserDetail()

const onEditClick = () => {
  edit.value = true
}

const onShowClick = () => {
  edit.value = false
}

const i18n = useI18n()
const handlerCreate = () => {
  loading.value = true
  editorUser(userFrom.value)
    .then(() => {
      loading.value = false
      edit.value = false
      ElMessage.success(i18n.t('msg.user.editSuccess'))
      router.push('/user/manage')
    })
    .catch((err) => {
      console.log(err)
      loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.user-detail-container {
  .user-info-box {
    width: 600px;
    margin: 0 auto;
    .title {
      text-align: center;
      margin-bottom: 40px;
    }
    .header {
      text-align: right;
    }
    .content {
      padding-top: 20px;
      border-top: 1px solid #d4d4d4;
      .btns {
        ::v-deep .el-form-item__content {
          display: block;
          text-align: center;
        }
      }
    }
  }
}
</style>
